<template>
  <div class="container">
    <div class="img-box">
      <img class="main-img" :src="home_img_url" alt="beauty"/>
    </div>
    <button @click="goLogin" class="main-link">点击开启新时代</button>
  </div>
</template>

<script>
import * as types from '../../store/mutation-types/userInfo'

export default {
  data () {
    return {
        home_img_url:""
    }
  },
  computed: {
  },
  components: {
  },

  methods: {
      goLogin(){
          wx.redirectTo({
                  url: '/pages/login/main'
          })
      },
    getHomeImg () {
        var _this = this;
        console.log("bbb"+this.$store.state.theUserInfo);
      // 调用接口
        wx.request({   //获取用户打卡信息列表
            url: 'https://wz.zliangchina.com/api/product/get-home-img',
            method:"GET",
            header: {
                'content-type': 'application/json' // 默认值
            },
            success: function(res) {
                if(res.data.level == "success"){
                  _this.home_img_url = res.data.data;
                }
            }
        })

    },
  },

  onLoad () {
    // 调用应用实例的方法获取全局数据
    this.getHomeImg()
  }
}
</script>

<style>
  @keyframes zoomInOut
  {
    from {transform: scale(1, 1);}
    to {transform: scale(1.25, 1.25);}
  }
  .container {
    width: 100%;
    height: 100vh;
    background: #f5f5f5;
  }
  .img-box {
    height: 100%;
    width: 100%;
  }
  .main-img {
    min-width: 100%;
    min-height: 100%;
    animation: zoomInOut 15s linear infinite alternate;
  }
  .main-link {
    position: absolute;
    top: 80%;
    left: 0;
    right: 0;
    margin: auto;
    width: 70%;
    line-height: 72rpx;
    border: none;
    color: #fff;
    font-size: 28rpx;
    text-align: center;
    background: rgba(0,0,0,0.7);
    border-radius: 5px;
  }
</style>
